<template>
	<view><text>尝试做个波浪效果</text>
		<view class="wave">
			<view class="wave1"></view>
			<text class="wave22"></text>
			<text class="wave32"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.wave {
		position: relative;
		border: 1px solid silver;
		width: 80%;
		height: 130px;
		border-radius: 0;
		line-height: 50px;
		margin: 0 auto;
		font-size: 14px;
		text-align: center;
		
		overflow: hidden;
		animation: water-wave linear infinite;
	}

	.wave1 {
		position: absolute;
		top: -130%;
		left: -3%;
		background: #33cfff;
		opacity: .6;
		width: 300px;
		height: 290px;
		border-radius: 60%;
		animation: inherit;
		animation-duration: 3s;
	}

	.wave2 {
		position: absolute;
		top: 40%;
		left: -35%;
		background: #0eaffe;
		opacity: .7;
		width: 200%;
		height: 200%;
		border-radius: 35%;
		animation: inherit;
		animation-duration: 7s;
	}

	.wave3 {
		position: absolute;
		top: 50%;
		left: -35%;
		background: #0f7ea4;
		opacity: .3;
		width: 200%;
		height: 200%;
		border-radius: 33%;
		animation: inherit;
		animation-duration: 11s;
	}

	@keyframes water-wave {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
